<style scoped>
    .chose>div:first-child{line-height: 24px;float: left}
    .chose>div:nth-child(2){float: left}
    .day-chose{margin-bottom: 10px;}
    .day-chose>div{display: inline-block;}
    .day-chose .el-radio{margin-right: 10px;}
    .day-chose span{line-height: 24px;display: inline-block;padding: 0px 5px;}
    .day-chose .el-form-item{margin-bottom: 0px;margin-right: 0px;}
    .day-chose .el-date-editor.el-input{width:120px;}
    .day-chose  .el-select{width: 80px}
    .el-form--inline .el-form-item__content{line-height:24px;}
</style>
<template>
    <div class="change-plan-page" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="正在加载">
        <el-form :inline="true" :model="modifyForm" ref="modifyForm" >
            <el-form-item label="法人名称" class="selectMB10" >
                <el-select size="mini" v-if="legalPersonLists.length> 1" clearable v-model="modifyForm.legalPersonName"   placeholder="请选择">
                    <el-option v-for="(legalPerson,index) in legalPersonLists" :key="index" :label="legalPerson.legalPersonName" :value="legalPerson.legalPersonName">
                    </el-option>
                </el-select>
                <el-input size="mini" disabled v-else v-model="modifyForm.legalPersonName" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="计划大类" class="selectMB10" >
                <el-select size="mini"  clearable v-model="modifyForm.planCatgory"   placeholder="请选择">
                    <el-option v-for="(catgory,index) in catgoryLists" :key="index" :label="catgory" :value="catgory">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="产品线" class="selectMB10" >
                <el-select size="mini" clearable v-model="modifyForm.productLine"  placeholder="请选择">
                    <el-option v-for="(line,index) in productLineList" :key="index" :label="line" :value="line"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="替换组编码" class="selectMB10" >
                <el-input size="mini" v-model="modifyForm.clusterCode" placeholder="请输入替换组编码"></el-input>
            </el-form-item>
            <el-form-item label="替换组名称" class="selectMB10" >
                <el-input size="mini"  v-model="modifyForm.clusterName" placeholder="请输入替换组名称"></el-input>
            </el-form-item>
            <el-form-item label="预测时间" class="selectMB10">
                <el-checkbox size="mini" v-model="isContainHistory" ></el-checkbox>
                <label>是否包含历史 &nbsp;</label>
                <el-select size="mini" clearable v-if="isContainHistory" v-model="modifyForm.forecastDate"  placeholder="请选择">
                    <el-option v-for="(time,index) in predictionTimeList" :key="index" :label="time" :value="time"></el-option>
                </el-select>
                <el-select size="mini"  v-else v-model="modifyForm.forecastDate" disabled></el-select>
            </el-form-item>

            <!--<el-form-item label="是否有质量问题" class="selectMB10" >
                <el-select size="mini"     placeholder="请选择">
                    <el-option>
                    </el-option>
                </el-select>
            </el-form-item>-->
            <div class="chose">
                <div>预测周期：</div>
                <div>
                    <div class="day-chose">
                        <el-form-item  >
                            <el-radio :label="1" v-model="radio" v-cloak>按月查询</el-radio>
                        </el-form-item>
                        <div v-if="radio==1">
                            <el-form-item label="" class="selectMB10" >
                                <el-date-picker type="month" size="mini" :editable="false" :clearable="false" v-model="startYearMonth"  placeholder="请选择" @change="startYearMonthChange"></el-date-picker>
                            </el-form-item>
                             <span>至</span>
                            <el-form-item label="" class="selectMB10" >
                                <el-date-picker type="month" size="mini" :editable="false" :clearable="false" v-model="endYearMonth"  placeholder="请选择" @change="endYearMonthChange"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="" class="selectMB10" >
                                <el-button class="bolder outsideBtnBS selectAll"  size="mini" type="danger"  @click="monthQuery">查询</el-button>
                                <el-button class="bolder outsideBtnBS selectAll"  size="mini" type="danger"  @click="exportMonth()" >导出</el-button>
                            </el-form-item>
                        </div>
                    </div>
                    <div class="day-chose">
                        <el-form-item  >
                            <el-radio :label="2" v-model="radio"  v-cloak>按周查询</el-radio>
                        </el-form-item>
                        <div v-if="radio==2">
                            <el-form-item label="" >
                                <el-date-picker type="year" size="mini" :editable="false" :clearable="false" v-model="modifyForm.yearNumBegin" align="right" placeholder="请选择" @change="yearNumBeginChange"></el-date-picker>
                            </el-form-item>
                            <span>第</span>
                            <el-form-item>
                                <el-select size="mini"   v-model="modifyForm.weekNumBegin"  placeholder="请选择">
                                    <el-option v-for="(weekNumBegin,index) in weekNumBeginLists" :key="index" :label="weekNumBegin" :value="weekNumBegin"></el-option>
                                </el-select>
                            </el-form-item>
                            <span>周</span>
                            <span>至</span>
                            <el-form-item >
                                <el-date-picker type="year" size="mini" :editable="false" :clearable="false" v-model="modifyForm.yearNumEnd"  @change="yearNumEndChange" align="right" placeholder="请选择">
                                </el-date-picker>
                            </el-form-item>
                            <span>第</span>
                            <el-form-item>
                                <el-select size="mini"   v-model="modifyForm.weekNumEnd"  placeholder="请选择">
                                    <el-option v-for="(weekNumEnd,index) in weekNumEndLists" :key="index" :label="weekNumEnd" :value="weekNumEnd"></el-option>
                                </el-select>
                            </el-form-item>
                            <span>周</span>
                            <el-form-item>
                                <el-button class="bolder outsideBtnBS selectAll"  size="mini" type="danger"  @click="weekQuery">查询</el-button>
                                <el-button class="bolder outsideBtnBS selectAll"  size="mini" type="danger"  @click="exportWeek()">导出</el-button>
                            </el-form-item>
                        </div>
                    </div>
                </div>

            </div>
        </el-form>
        <!--表格-->
        <el-table :data="tableData" border style="width: 100%" v-loading.body="loading" element-loading-text="拼命加载中">
            <el-table-column type="index" header-align="center" align="center" label="序"   width="40"></el-table-column>
            <el-table-column prop="yearNum" header-align="center"  label="年份" width="60" ></el-table-column>
            <el-table-column prop="monthNum" header-align="center"  label="月份" width="60"></el-table-column>
            <el-table-column v-if="radio==2" prop="weekNum" header-align="center"  label="周次" width="60"></el-table-column>
            <el-table-column prop="planCatgory" header-align="center"  label="计划大类" ></el-table-column>
            <el-table-column prop="clusterCode" header-align="center"  label="替换组编码" ></el-table-column>
            <el-table-column prop="clusterName" header-align="center"  label="替换组名称" ></el-table-column>
            <el-table-column prop="productLine" header-align="center"  label="产品线" ></el-table-column>
            <el-table-column prop="actualDemand" header-align="center"  label="实际需求量" ></el-table-column>
            <el-table-column prop="forecastDemand" header-align="center"  label="预测需求量" ></el-table-column>
            <el-table-column prop="inReserveCount" header-align="center"  label="在保量" ></el-table-column>
            <!--<el-table-column  prop="inReserveCountQuality" header-align="center"  label="在保量质量" ></el-table-column>-->
            <el-table-column  prop="seasonalFactor" header-align="center"  label="季节因子" ></el-table-column>
            <!--<el-table-column prop="isProblemWord" header-align="center"  label="是否有质量问题" ></el-table-column>-->
            <el-table-column  prop="forecastDate" header-align="center"  label="预测时间" ></el-table-column>
        </el-table>
        <el-pagination v-if="isPaging" @size-change="handleSizeChange" @current-change="handleCurrentChange"  :current-page.sync="currentPage3" :current-page="pageIndex"  :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :page-count="totalPage" :total="totalNumber"></el-pagination>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                modifyForm:{
                    legalPersonName:'',
                    legalPersonId:'',
                    planCatgory:'',
                    productLine:'',
                    clusterCode:'',
                    clusterName:'',
                    monthYearNumEnd:'',
                    yearNumEnd:'',
                    weekNumEnd:'',
                    yearNumBegin:'',
                    monthYearNumBegin:'',
                    weekNumBegin:'',
                    monthNumBegin:'',
                    monthNumEnd:'',
                    forecastDate:''
                },
                isContainHistory:false,   // 是否包含历史
                radio:'',
                startYearMonth:'',
                endYearMonth:'',
                legalPersonLists:[],//法人名称
                catgoryLists:[],//计划大类
                productLineList:[],//产品线
                predictionTimeList:[],//预测时间
                weekNumBeginLists:[],//开始周
                weekNumEndLists:[],//结束周
                tableData:[],
                pageIndex: 1,    //当前页（必传）
                pageSize: 10,   //每页多少条
                totalNumber: '',
                totalPage: '',
                currentPage3: 3,
                isPaging:false,
                loading:false,
                fullscreenLoading:false,//导出的全屏禁用
            }
        },
        watch:{
            radio(){
                if(this.radio==1){
                    this.startYearMonth='';
                    this.endYearMonth='';
                }else{
                    this.modifyForm.yearNumBegin='';
                    this.modifyForm.weekNumBegin='';
                    this.modifyForm.yearNumEnd='';
                    this.modifyForm.weekNumEnd='';
                }
                this.tableData=[];
                this.isPaging=false;
            },
            isContainHistory(){
                if(!this.isContainHistory){
                    this.modifyForm.forecastDate = this.predictionTimeList[0];
                }
            }
        },
        mounted:function(){
            this.$store.commit('currentActive', 'DemandForecast');
            this.legalPersonDropDownValue();
            this.getPlanCatgory();
            this.getProductLine();
            if(!this.isContainHistory){
                this.getPredictionTime();   //预测时间下拉列表
            }
        },
        methods:{
            // 查询法人名称
            legalPersonDropDownValue(){  //法人名称下拉列表值
                var _this = this;
                $.ajax({
                    type:'GET',
                    url:_this.procurement_service+"legalPerson/ofCurrentUser",
                    cache:false,
                    success:function(data){
                        if(data.success){
                            _this.legalPersonLists = data.data;
                            if(_this.legalPersonLists.length == 1){
                                _this.modifyForm.legalPersonId =_this.legalPersonLists[0].id;
                                _this.modifyForm.legalPersonName =_this.legalPersonLists[0].legalPersonName
                            }
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            //  计划大类
            getPlanCatgory(){
                var _this = this;
                $.ajax({
                    type:'GET',
                    url:_this.procurement_service+"demandForecast/getPlanCatgory",
                    cache:false,
                    success:function(data){
                        if(data.success){
                            _this.catgoryLists = data.data;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            //产品线
            getProductLine(){
                var _this = this;
                $.ajax({
                    type:'GET',
                    url:_this.procurement_service+"demandForecast/getProductLine",
                    cache:false,
                    success:function(data){
                        if(data.success){
                            _this.productLineList = data.data;
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            // 预测时间
            getPredictionTime(){
                var _this = this;
                $.ajax({
                    type:'GET',
                    url:_this.procurement_service+"demandForecast/getForecastDate",
                    cache:false,
                    success:function(data){
                        if(data.success){
                            _this.predictionTimeList = data.data;
                            if(!_this.isContainHistory){
                                _this.modifyForm.forecastDate = _this.predictionTimeList[0];
                            }
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            yearNumBeginChange(val){
                this.modifyForm.yearNumBegin=val;
                this.getWeek(this.modifyForm.yearNumBegin);
            },
            yearNumEndChange(val){
                this.modifyForm.yearNumEnd=val;
                this.getWeek(this.modifyForm.yearNumEnd,1);

            },
            startYearMonthChange(val){
                this.startYearMonth=val;
                var data=this.startYearMonth.split("-");
                this.modifyForm.monthYearNumBegin=parseInt(data[0]);
                this.modifyForm.monthNumBegin=parseInt(data[1]);
            },
            endYearMonthChange(val){
                this.endYearMonth=val;
                var data=this.endYearMonth.split("-");
                this.modifyForm.monthYearNumEnd=parseInt(data[0]);
                this.modifyForm.monthNumEnd=parseInt(data[1]);
            },
            monthQuery(){
                var _this = this;
                var tmp={
                    planCatgory:this.modifyForm.planCatgory,
                    productLine:this.modifyForm.productLine,
                    clusterCode:this.modifyForm.clusterCode,
                    clusterName:this.modifyForm.clusterName,
                    yearNumBegin:this.modifyForm.monthYearNumBegin,
                    monthNumBegin:this.modifyForm.monthNumBegin,
                    yearNumEnd:this.modifyForm.monthYearNumEnd,
                    monthNumEnd:this.modifyForm.monthNumEnd,
                    forecastDate:this.modifyForm.forecastDate,
                    pageIndex:this.pageIndex,
                    pageSize:this.pageSize

                };
                _this.loading=true
                $.ajax({
                    type:'POST',
                    url:_this.procurement_service+"demandForecast/queryByMonth",
                    cache:false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success:function(data){
                        if(data.success){
                            _this.loading=false;
                            _this.tableData = data.data.dataList;
                            _this.totalNumber=data.data.totalNumber;
                            _this.totalPage=data.data.totalPage;
                            _this.isPaging=true;

                        }else{
                            _this.loading=false;
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            exportWeek(){
                var _this=this;
                var planCatgory=this.modifyForm.planCatgory?this.modifyForm.planCatgory:"";
                var productLine=this.modifyForm.productLine?this.modifyForm.productLine:"";
                var clusterCode=this.modifyForm.clusterCode?this.modifyForm.clusterCode:"";
                var clusterName=this.modifyForm.clusterName?this.modifyForm.clusterName:"";
                var weekOrMonth="week";
                var yearNumBegin=this.modifyForm.yearNumBegin?this.modifyForm.yearNumBegin:"";
                var yearNumEnd=this.modifyForm.yearNumEnd?this.modifyForm.yearNumEnd:"";
                var weekNumBegin=this.modifyForm.weekNumBegin?this.modifyForm.weekNumBegin:"";
                var weekNumEnd=this.modifyForm.weekNumEnd?this.modifyForm.weekNumEnd:"";
                var forecastDate=this.modifyForm.forecastDate?this.modifyForm.forecastDate:"";
                if(planCatgory){
                    _this.fullscreenLoading=true;
                    $.ajax({
                        type:'GET',
                        url:_this.procurement_service+'demandForecast/exportWeek?planCatgory='+planCatgory+"&productLine="+productLine
                        +"&clusterCode="+clusterCode+"&clusterName="+clusterName+"&weekOrMonth="+weekOrMonth+"&yearNumBegin="+yearNumBegin+"&yearNumEnd="+yearNumEnd
                        +"&weekNumBegin="+weekNumBegin+"&weekNumEnd="+weekNumEnd+"&forecastDate="+forecastDate,
                        cache:false,
                        contentType: "application/json;charset=utf-8",
                        success:function(data){
                            _this.fullscreenLoading=false;
                            window.location.href=_this.procurement_service+'demandForecast/exportWeek?planCatgory='+planCatgory+"&productLine="+productLine
                                +"&clusterCode="+clusterCode+"&clusterName="+clusterName+"&weekOrMonth="+weekOrMonth+"&yearNumBegin="+yearNumBegin+"&yearNumEnd="+yearNumEnd
                                +"&weekNumBegin="+weekNumBegin+"&weekNumEnd="+weekNumEnd+"&forecastDate="+forecastDate;
                            _this.common.successTip("导出成功");
                        },
                        error:function(){
                            _this.fullscreenLoading=false;
                            _this.common.errorTip("错误");
                        }

                    })
                }else{
                    _this.fullscreenLoading=false;
                    _this.common.errorTip("请选择计划大类");
                }             

            },
            exportMonth(){
                var _this=this;
                var planCatgory=this.modifyForm.planCatgory?this.modifyForm.planCatgory:"";
                var productLine=this.modifyForm.productLine?this.modifyForm.productLine:"";
                var clusterCode=this.modifyForm.clusterCode?this.modifyForm.clusterCode:"";
                var clusterName=this.modifyForm.clusterName?this.modifyForm.clusterName:"";
                var weekOrMonth="month";
                var yearNumBegin=this.modifyForm.monthYearNumBegin?this.modifyForm.monthYearNumBegin:"";
                var yearNumEnd=this.modifyForm.monthYearNumEnd?this.modifyForm.monthYearNumEnd:"";
                var monthNumBegin=this.modifyForm.monthNumBegin?this.modifyForm.monthNumBegin:"";
                var monthNumEnd=this.modifyForm.monthNumEnd?this.modifyForm.monthNumEnd:"";
                var forecastDate=this.modifyForm.forecastDate?this.modifyForm.forecastDate:"";
                if(planCatgory){
                    _this.fullscreenLoading=true;
                    $.ajax({
                        type:'GET',
                        url:_this.procurement_service+'demandForecast/exportMonth?planCatgory='+planCatgory+"&productLine="+productLine
                        +"&clusterCode="+clusterCode+"&clusterName="+clusterName+"&weekOrMonth="+weekOrMonth+"&yearNumBegin="+yearNumBegin+"&yearNumEnd="+yearNumEnd
                        +"&monthNumBegin="+monthNumBegin+"&monthNumEnd="+monthNumEnd+"&forecastDate="+forecastDate,
                        cache:false,
                        contentType: "application/json;charset=utf-8",
                        success:function(data){
                            _this.fullscreenLoading=false;
                            window.location.href=_this.procurement_service+'demandForecast/exportMonth?planCatgory='+planCatgory+"&productLine="+productLine
                                +"&clusterCode="+clusterCode+"&clusterName="+clusterName+"&weekOrMonth="+weekOrMonth+"&yearNumBegin="+yearNumBegin+"&yearNumEnd="+yearNumEnd
                                +"&monthNumBegin="+monthNumBegin+"&monthNumEnd="+monthNumEnd+"&forecastDate="+forecastDate;
                            _this.common.successTip("导出成功");
                        },
                        error:function(){
                            _this.fullscreenLoading=false;
                            _this.common.errorTip("错误");
                        }

                    })
                }else{
                    _this.fullscreenLoading=false;
                    _this.common.errorTip("请选择计划大类");
                }
                

               /* window.location.href=iwm_service+'demandForecast/exportMonth?planCatgory='+planCatgory+"&productLine="+productLine
                +"&clusterCode="+clusterCode+"&clusterName="+clusterName+"&weekOrMonth="+weekOrMonth+"&yearNumBegin="+yearNumBegin+"&yearNumEnd="+yearNumEnd
                +"&monthNumBegin="+monthNumBegin+"&monthNumEnd="+monthNumEnd;*/

            },

            weekQuery(){

                var _this = this;
                _this.loading=true
                var tmp={
                    planCatgory:this.modifyForm.planCatgory,
                    productLine:this.modifyForm.productLine,
                    clusterCode:this.modifyForm.clusterCode,
                    clusterName:this.modifyForm.clusterName,
                    yearNumBegin:this.modifyForm.yearNumBegin,
                    weekNumBegin:this.modifyForm.weekNumBegin,
                    yearNumEnd:this.modifyForm.yearNumEnd,
                    weekNumEnd:this.modifyForm.weekNumEnd,
                    forecastDate:this.modifyForm.forecastDate,
                    pageIndex:this.pageIndex,
                    pageSize:this.pageSize
                };
                $.ajax({
                    type:'POST',
                    url:_this.procurement_service+"demandForecast/queryByWeek",
                    cache:false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success:function(data){
                        if(data.success){
                            _this.loading=false;
                            _this.tableData = data.data.dataList;
                            _this.totalNumber=data.data.totalNumber;
                            _this.totalPage=data.data.totalPage;
                            _this.isPaging=true
                        }else{
                            _this.loading=false;
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })
            },
            //根据年获取周数
            getWeek(year,num){
                var _this = this;
                $.ajax({
                    type:'GET',
                    url:_this.procurement_service+"demandForecast/getWeek?year="+year,
                    cache:false,
                    success:function(data){
                        if(data.success){
                            if(num==1){
                                _this.weekNumEndLists=data.data;
                            }else{
                                _this.weekNumBeginLists=data.data;
                            }
                        }else{
                            _this.common.errorTip(data.errorMessage);
                        }
                    }
                })

            },
            //分页
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.pageSize=val;
                if(this.radio==1){
                    this.monthQuery();
                }else{
                    this.weekQuery();
                }
            },
            //点击页码分页查询点击事件
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.pageIndex=val;
                if(this.radio==1){
                    this.monthQuery();
                }else{
                    this.weekQuery();
                }
            }
        }
    }
</script>

<style>

</style>